<template>
	<view class="h-full flex flex-column">
		<view :class="[(pagingObj.data0.length === 0 || pagingObj.err0) && !loading ? 'flex-1 flex-center' : '']">
			<c-skeleton-list
				:data="pagingObj.data0"
				:loading="loading"
				:loadMoreStatus="pagingObj.status0"
				@clickLoadMore="pagingLoadNext"
				:emptyMinHeight="0"
				:fail="pagingObj.err0"
				@retry="reloadPage"
			>
				<view
					v-for="(data,i) in pagingObj.data0"
					:key="data.id"
					class='p-3-1 border-b b-active-op20 row-center'
					:class="[i === 0 ? 'border-t' : '']"
					hover-class="bg-primary-op20"
					hover-start-time="0"
					hover-stay-time="50"
					@click="toOrderDetail(data)"
				>
					<view class="flex-1">
						<view class="row-center mb-2-2">
							<text class="text-n color-main block">订单编号: {{ data.orderNo }}</text>
							<view class="flex-1" />
							<text class="text-n color-main block">{{ getOrderStatusText(data.status) }}</text>
						</view>
						<view class="row-center">
							<text class="text-n color-main block">下单时间: {{ dateUtil.format(data.orderTime, "yyyy-MM-dd hh:mm") }}</text>
							<view class="flex-1" />
							<text class="text-n color-main block">订单金额: ¥{{ data.orderAmount }}</text>
						</view>
					</view>
					<view class="pl-3-1">
						<text class="iconfont icon-you text-l color-secondary"></text>
					</view>
				</view>
			</c-skeleton-list>
		</view>
	</view>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { getOrderPage } from '@/base/api/member.js';
import pagingComponent from '@/uni-sdk/components/multiple-paging-component.js';
import authCache from '@/uni-sdk/utils/authCache';
import dateUtil from '@/uni-sdk/utils/date';
import { getOrderStatusText } from "@/base/common-business.js";

export default pagingComponent({
	loadDataHandler0: getOrderPage,
	components: {},
	setup(pagingSetting) {
		const loading = ref(true);
		const searchModel = {
			communityId: authCache.getCommunity().id,
		};
		/* searchText */
		function handleSearchText() {
			searchModel.searchText = searchValue.value;
			reloadPage();
		}
		/* overview */
		/* common */
		async function reloadPage() {
			loading.value = true;
			await pagingSetting.pagingLoad(true);
			loading.value = false;
		}
		onMounted(() => {
			reloadPage();
		});
		function getSearchModel() {
			return searchModel;
		}
		function toOrderDetail(item){
			uni.navigateTo({
				url: "/pages/order-detail/order-detail?orderNo=" + item.orderNo
			});
		}
		return {
			loading,
			getSearchModel,
			reloadPage,
			toOrderDetail,
			getOrderStatusText,
			dateUtil,
		};
	},
});
</script>

<style lang="scss">
page {
	height: 100%;
}
</style>
